<template>
  <div class="app-container">

		<div class="filter-container">
			<!--<el-input  style="width: 200px;"   v-model="query.realName" placeholder="真实姓名" class="filter-item"  ></el-input>-->
			<el-input  style="width: 200px;"   v-model="query.ids" placeholder="用户ID" class="filter-item"  ></el-input>
			<el-input  style="width: 200px;"   v-model="query.account" placeholder="微信昵称" class="filter-item"  ></el-input>
			<el-input  style="width: 200px;"   v-model="query.phone" placeholder="电话" class="filter-item"  ></el-input>

			<!-- <el-select v-model="type" class="filter-item"  placeholder="请选择">
					<el-option
					v-for="item in mapType"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
			</el-select> -->

			<el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
			<el-button @click="getRecords" type="danger" class="filter-item">刷新</el-button>
		</div>

		<el-table
      height="calc( 100vh - 180px )"
      v-horizontal-scroll="'always'"
      v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row>
			<!-- <el-table-column type="selection" width="55" /> -->
			<!-- <el-table-column type="index" label="序列" width="50" /> -->
			<el-table-column prop="id" label="ID" width="100" />

<!--      <el-table-column prop="is_member" label="会员" width="50" >
        <template slot-scope="scope">
          <i v-if="scope.row.is_member==1" class="el-icon-check"></i>
        </template>
      </el-table-column>-->
      <el-table-column prop="member_type_name" label="会员类型" width="100" />

			<el-table-column prop="avatar" label="头像" width="80" >
					<template slot-scope="scope">
						<img v-if="scope.row.get_user" class="table-img" :src="scope.row.get_user.avatar">
					</template>
			</el-table-column>
			<el-table-column prop="get_user.nick_name" label="用户名" width="120" />
      <el-table-column prop="get_user.phone" label="电话" width="120" />
      <el-table-column prop="created_at" label="购买时间" width="160" />
      <el-table-column prop="user_expire_time" label="过期时间" width="160" />
<!--			<el-table-column fixed="right" label="操作" width="260">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="changeExpireTimeDialog(scope.$index, scope.row)">调整过期时间</el-button>
&lt;!&ndash;					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>&ndash;&gt;
&lt;!&ndash;					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>&ndash;&gt;
          <el-dropdown style="margin-left: 10px"  @command="handleCommand">
            <el-button size="mini" type="primary">
              设置会员<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type:'first',id:scope.row.id}">首试</el-dropdown-item>
              <el-dropdown-item :command="{type:'month',id:scope.row.id}">月会员</el-dropdown-item>
              <el-dropdown-item :command="{type:'quarter',id:scope.row.id}">季度会员</el-dropdown-item>
              <el-dropdown-item :command="{type:'year',id:scope.row.id}">年会员</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
			</el-table-column>-->
		</el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog
      title="调整过期时间"
      :visible.sync="dialogVisible"
      width="30%"
      >

      <el-date-picker
        v-model="expireTime"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期">
      </el-date-picker>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeExpireTime">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>

import { myGet,myPost } from '@/utils/myRequest'

const urlUserLst = '/guard/user/memberLst';
const urlAddUser = '/guard/user/add';
const urlGetUser = '/guard/user/detail';
const urlDeleteUser = '/guard/user/del';
const urlSetMember = '/guard/user/setMember';

export default {

    data() {
        return {
					host:process.env.VUE_APP_HOST,
					isAdd:true,
					addDialogFormVisible:false,
          dialogVisible:false,
					mapType:[],
          selectUserId:0,
          expireTime:'',
					query:{
					  ids:'',
						account:'',
						realName:'',
						phone:'',
					},
					pagination:{
						total:0,
						page:1,
						pageSize:20,
					},
					dialogFormVisible:false,
					list: [],
					formLoading:false,
					listLoading: true
        }
    },
    methods: {

      handleCommand(command) {

        myGet(urlSetMember,command).then(res=>{
          if(res.status){
             this.$message.success(res.msg)
             this.getRecords();
          }
        })
      },

      reload(){
        Object.assign(this.$data.query,this.$options.data().query)
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },
			getRecords(){
        this.listLoading = true;
        let params = Object.assign(this.query,this.pagination)
					myGet(urlUserLst,params).then((res) =>{
            this.listLoading = false;
            if(res.status){
              this.list = res.data.records
              this.pagination.total = res.data.total
            }
          })
			},
			changeStatus(row){
        myPost(urlAddUser,{id:row.id, status:row.status}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
          }
        })
			},

      changeExpireTimeDialog(index, row){
        this.dialogVisible = true
        this.selectUserId = row.id
        this.expireTime = row.expire_time
      },
      changeExpireTime(){
        myPost(urlAddUser,{id:this.selectUserId, expireTime:this.expireTime}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.dialogVisible = false
            this.getRecords()
          }
        })
      },

			handleEdit(index, row) {
				const id = row.id
				this.$router.push({path:`edit/${id}`})
			},
			handleDelete(index, row) {
					this.$confirm('确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
            let ids = row.id
            myGet(urlDeleteUser, { ids }).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
                this.reload();
              }
            })
          })
			},

			handleSizeChange(val) {
					this.pagination.pageSize = val
					this.pagination.page = 1
					this.getRecords()
			},
			handleCurrentChange(val) {
					this.pagination.page = val
					this.getRecords();
			},
			//多选
			toggleSelection(rows) {
					if (rows) {
					rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
					});
					} else {
							this.$refs.multipleTable.clearSelection();
					}
			}
    },
    mounted() {
        this.getRecords()
    }
}
</script>

<style>

.table-img{
    width: 50px;
    height: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>


